<template>
  <div class="option-cotainer" 
    @click="select()"
    :class="{'selected': $parent.selectValue == value}"
  >
    {{ label }}
  </div>
</template>

<script>
export default {
  name: 'MyOption',
  props:{
    value: {
      type: Number,
      default: 0,
    },
    label: {
      type: String,
      default: '',
    }
  },
  watch:{
    label(){
      this.$parent.label = ""
      this.$parent.selectValue = 0
    }
  },
  methods:{
    select(){
      this.$parent.isActive = false
      this.$parent.label = this.label
      this.$parent.selectValue = this.value
    }
  },
  beforeUnmount(){
    this.$parent.label = ""
    this.$parent.selectValue = 0
  }
}
</script>

<style scoped>
.option-cotainer {
  transition: all 0.2s;
  padding-left: 10px;
}
.option-cotainer:hover {
  transition: all 0.2s;
  background-color: rgb(233, 233, 233);
}

.selected {
  color: rgb(71, 71, 224);
  font-weight: bold;
}
</style>
